<template>
  <div class="app-container" @click="hideContextMenu">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="设备编码" prop="scrapeCode">
        <el-input
          v-model="queryParams.scrapeCode"
          clearable
          placeholder="请输入刮粪机编号"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备名称" prop="scrapeName">
        <el-input
          v-model="queryParams.scrapeName"
          clearable
          placeholder="请输入刮粪机名称"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="栏舍编码" prop="phouseCode">
        <el-select v-model="queryParams.phouseCode" clearable filterable placeholder="请输入设备编码"
                   @keyup.enter.native="handleQuery"
        >
          <el-option

            v-for="item in scrapeList"
            :key="item.phouseCode"
            :label="item.phouseCode"
            :value="item.phouseCode"/>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['equipment:scrape:add']"
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
                v-hasPermi="['equipment:scrape:edit']"
              >修改
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['equipment:scrape:delete']"
              >删除
              </el-button>
            </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="1" style="margin-top: 100px;margin-left: 20px">
        <svg class="icon" height="100" p-id="7126" t="1708502749876" version="1.1"
             viewBox="0 0 1024 1024" width="64" xmlns="http://www.w3.org/2000/svg" @click="goleft">
          <path
            d="M745.09774 1024L232.934734 512.163005 745.09774 0l45.967526 45.967526-465.869468 466.195479L791.065266 978.032474l-45.967526 45.967526z"
            fill="#dbdbdb" p-id="7127"></path>
        </svg>
      </el-col>
      <el-col :span="20">
        <div class="scroll-container" @wheel="handleWheel">
          <el-row :gutter="30" class="table-body" style="margin-left: 20px;margin-right:20px ">
            <el-col v-for="(item, index) in scrapeList" :key="index"
                    :span="5"
                    class="function-card emessage-div"
                    style="margin-top: 20px">
              <div
                v-loading="isLoading(item)"
                :element-loading-text="remainingTimes[item.scrapeId]==null?'剩余运行时间'+item.runningTime+'分钟':'剩余运行时间'+remainingTimes[item.scrapeId]"
                element-loading-background="rgba(0, 0, 0, 0.6)"
                element-loading-spinner="el-icon-loading"
                @click="isLoading(item) && scrapeNo(item)">
                <div @click="showDetails(item)"
                     @contextmenu.prevent="$event.preventDefault(); showContextMenu($event, item)">
                  <el-card :body-style="{ padding: '0px' }" class="parent-icon" shadow="hover"
                  >

                    <i v-if="item.scrapeState==='1'" class="el-icon-success green-icon" title="运行"
                       @click.stop="icoeUp(item)"></i>
                    <!-- 否则，显示el-icon-circle-cross图标 -->
                    <!--            <i v-else-if="item.fansState==='2'" class="el-icon-warning orange-icon" @click.stop="icoeUp(item)"
                                   title="故障"></i>-->
                    <i v-else-if="item.scrapeState==='2'" class="el-icon-error rea-icon" title="关闭"
                       @click.stop="icoeUp(item)"></i>


                    <!--              <img src="/src/assests/images/scrape.png" height="140"/>-->
                    <svg class="icon" height="140" p-id="4334" t="1708317591977"
                         version="1.1" viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M604 803.2c-2.4-3.2-6.4-2.4-9.6-2.4h-48c-7.2 0-14.4 1.6-20.8 5.6-27.2 16.8-14.4-12.8-42.4 3.2-3.2 1.6-6.4 4-9.6 5.6-3.2 3.2-8 2.4-11.2-0.8-1.6-1.6-2.4-2.4-4-3.2-28-22.4-56-45.6-83.2-68-4.8-4-10.4-6.4-16.8-6.4H258.4c-4 0.8-8 0-12-2.4L197.6 488l-7.2-2.4c-11.2-1.6-22.4-3.2-33.6-5.6-20.8-3.2-42.4-6.4-63.2-10.4-3.2-0.8-6.4-2.4-8-5.6l-4.8-6.4c-17.6-24-35.2-232.8-52.8-256-1.6-1.6-2.4-5.6-6.4-4-0.8 150.4-0.8 576-0.8 727.2 0 2.4 0.8 4.8 0.8 7.2 5.6 0.8 11.2 0.8 16 0.8h600.8c1.6 0 3.2-0.8 5.6-1.6 1.6-9.6-38.4-116-40-128z m0 0"
                        p-id="4335"></path>
                      <path
                        d="M898.4 227.2c1.6-0.8 2.4-1.6 4-3.2-0.8-1.6-2.4-3.2-3.2-4.8L788 100c-1.6 1.6-3.2 2.4-4 4l-74.4 124.8c-0.8 1.6-1.6 3.2-1.6 4 4 6.4 11.2 9.6 14.4 17.6-1.6 2.4-3.2 4.8-5.6 7.2-60 68.8-200 224-209.6 232-2.4-0.8-4-2.4-6.4-4-12-10.4-23.2-20.8-35.2-32l-8.8-8-4.8 2.4c-31.2 24.8-57.6 55.2-79.2 88-12 17.6-20 37.6-24.8 58.4-8 39.2 9.6 79.2 43.2 100 18.4 11.2 40.8 13.6 60.8 5.6 12.8-4.8 24.8-10.4 35.2-18.4 14.4-10.4 28.8-23.2 40.8-36.8 18.4-19.2 34.4-40.8 49.6-63.2 2.4-3.2 4-6.4 6.4-10.4-12.8-18.4-26.4-35.2-38.4-52.8 2.4-3.2 4-5.6 5.6-8 66.4-77.6 192.8-224 200.8-231.2 7.2 3.2 11.2 12 19.2 15.2l127.2-67.2z m-60-27.2c1.6 2.4 3.2 4 4.8 6.4-1.6 1.6-3.2 2.4-4.8 4l-17.6 9.6-25.6 12c-3.2 1.6-7.2 1.6-9.6-1.6-4-4-9.6-8.8-12-11.2-3.2-2.4-6.4-4.8-8-8.8 9.6-17.6 20-33.6 32-49.6 14.4 11.2 28 24 40.8 39.2z m0 0M729.6 809.6c4.8-4 12.8-8 22.4-11.2 14.4-4.8 32.8-8 52.8-9.6l-5.6-8.8c-24.8 1.6-48 5.6-66.4 12-18.4 6.4-30.4 13.6-35.2 22.4l26.4 1.6c0.8-2.4 3.2-4.8 5.6-6.4z m22.4 37.6c-14.4-4.8-24-11.2-28-17.6l-26.4 1.6c4.8 8.8 17.6 16 35.2 22.4 18.4 6.4 40.8 10.4 66.4 12l4.8-8.8c-19.2-0.8-37.6-4.8-52-9.6z m164-55.2c-18.4-6.4-40.8-10.4-66.4-12l-5.6 8.8c20 1.6 38.4 4.8 52.8 9.6 14.4 4.8 24 11.2 28 17.6l26.4-1.6c-1.6-3.2-4-5.6-7.2-8-6.4-5.6-16-10.4-28-14.4z m3.2 44c-4.8 4-12.8 8-22.4 11.2-14.4 4.8-32.8 8-52.8 9.6l4.8 8.8c8-0.8 16.8-1.6 24-2.4 16-2.4 29.6-5.6 41.6-9.6 18.4-6.4 30.4-13.6 35.2-22.4l-26.4-1.6c0.8 2.4-1.6 4.8-4 6.4z m-23.2-13.6c0-13.6-32-24-71.2-24s-71.2 11.2-71.2 24c0 13.6 32 24 71.2 24 39.2 0.8 71.2-10.4 71.2-24z m-71.2 15.2c-24.8 0-44.8-7.2-44.8-15.2 0-8 20-15.2 44.8-15.2 24.8 0 44.8 7.2 44.8 15.2-0.8 8.8-20.8 15.2-44.8 15.2z m0 0"
                        p-id="4336"></path>
                      <path
                        d="M1012 823.2c0-36-84-64.8-187.2-64.8-103.2 0-187.2 28.8-187.2 64v0.8c2.4 34.4 85.6 62.4 187.2 62.4 101.6 0.8 184.8-27.2 187.2-62.4 0 0.8 0 0.8 0 0 0 0.8 0 0.8 0 0z m-171.2 53.6v-3.2c0-2.4-5.6-4.8-13.6-4.8-7.2 0-13.6 2.4-13.6 4.8v3.2c-78.4-1.6-141.6-22.4-149.6-48.8h8.8c7.2 0 13.6-2.4 13.6-4.8s-5.6-4.8-13.6-4.8H664c5.6-27.2 69.6-48.8 149.6-51.2v3.2c0 2.4 5.6 4.8 13.6 4.8 7.2 0 13.6-2.4 13.6-4.8v-3.2c77.6 2.4 138.4 24 144 50.4h-9.6c-7.2 0-13.6 2.4-13.6 4.8s5.6 4.8 13.6 4.8h8.8c-7.2 27.2-67.2 47.2-143.2 49.6z m0 0"
                        p-id="4337"></path>
                    </svg>
                    <div style="padding: 14px;background-color: #f2f2f2" @click.stop="tableQuery(item)">
                      <el-row style="margin-bottom: 5px;border-bottom: 1px solid #8f939c;">
                        <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 14px">产品名称</el-col>
                        <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 14px">设备编码</el-col>
                        <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 14px">栏舍编码</el-col>
                      </el-row>
                      <el-row style="margin-bottom: 5px;">
                        <el-col :span="8" class="row-item" style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;">{{
                            item.scrapeName
                          }}
                        </el-col>
                        <el-col :span="8" class="row-item" style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;">{{
                            item.scrapeCode
                          }}
                        </el-col>
                        <el-col :span="8" class="row-item" style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;">{{
                            item.phouseCode
                          }}
                        </el-col>
                        <el-col style="display: none">{{ item.fansId }}
                        </el-col>
                      </el-row>
                    </div>

                  </el-card>
                </div>
              </div>


            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="2" style="margin-top: 100px">
        <svg class="icon" height="100" p-id="6924" t="1708502371103" version="1.1"
             viewBox="0 0 1024 1024" width="64" xmlns="http://www.w3.org/2000/svg" @click="goright">
          <path
            d="M277.845333 1006.933333c-7.850667 0-16.042667-3.072-21.845333-9.216a30.788267 30.788267 0 0 1 0.341333-43.690666l445.781334-441.002667L256 69.973333a30.788267 30.788267 0 0 1 0-43.690666c11.946667-11.946667 31.744-12.288 43.690667 0L768 491.178667c5.802667 5.802667 9.216 13.653333 9.216 21.845333s-3.413333 16.042667-9.216 21.845333L299.690667 998.058667c-6.144 5.802667-13.994667 8.874667-21.845334 8.874666z"
            fill="#dbdbdb" p-id="6925"></path>
        </svg>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">

        <div style="margin-left: 50px;">
          <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="messageParams" size="small">
            <el-form-item label="栏舍编码" prop="queryParams">
              <el-select v-model="messageParams.phouseCode" clearable filterable placeholder="请输入设备编码"
                         @change="tableQuery"
              >
                <el-option

                  v-for="item in PhouseCodeList"
                  :key="item.phouseCode"
                  :label="item.phouseCode"
                  :value="item.phouseCode"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" size="mini" @click="resetTable">重置</el-button>
            </el-form-item>
          </el-form>
          <div style="height: 300px; overflow-y: auto; ">
            <el-table
              v-loading="loading"
              :data="messageList"
              height="300"
              style="width: 100%">
              <el-table-column
                label="设备编码"
                prop="scrapeCode"
                width="200">
              </el-table-column>
              <el-table-column
                fixed
                label="栏舍编码"
                prop="phouseCode"
                width="200">
              </el-table-column>
              <el-table-column
                label="栏舍类型"
                prop="phouseType"
                width="200">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.hmy_park_type" :value="scope.row.phouseType"/>
                </template>
              </el-table-column>
              <el-table-column
                fixed
                label="操作人"
                prop="createdBy"
                width="200">
              </el-table-column>
              <el-table-column
                label="操作"
                prop="scrapeState"
                width="200">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.hmy_equipment_switch" :value="scope.row.scrapeState"/>
                </template>
              </el-table-column>

              <el-table-column
                label="时间"
                prop="startOffTime"
                width="300">
                <template slot-scope="scope">
                  {{ scope.row.startOffTime.slice(0, 16) }}
                </template>
              </el-table-column>

            </el-table>
          </div>

        </div>
      </el-col>
    </el-row>
    <!--      保留编辑和删除-->
    <div
      v-if="contextMenuVisible"
      :style="{ top: contextMenuTop + 'px', left: contextMenuLeft + 'px' }"
      class="context-menu"
    >
      <ul>
        <li @click="handleUpdate">编辑</li>
        <li @click="handleDelete">删除</li>
      </ul>
    </div>

    <!-- 添加或修改-->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编码" prop="scrapeCode">
              <el-input v-model="form.scrapeCode" placeholder="请输入刮粪机编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="scrapeName">
              <el-input v-model="form.scrapeName" placeholder="请输入产品名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材质" prop="scrapeMaterial">
              <el-input v-model="form.scrapeMaterial" placeholder="请输入材质"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产日期" prop="scrapeProduction">
              <el-date-picker
                v-model="form.scrapeProduction"
                placeholder="请选择生产日期"
                style="width: 280px"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="scrapeState">
              <el-select
                v-model="form.scrapeState"
                placeholder="请选择状态"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in dict.type.hmy_fans_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="栏舍编码" prop="phouseCode">
              <el-select v-model="form.phouseCode" clearable filterable
                         placeholder="请输入设备编码"
                         style="width: 200px">
                <el-option

                  v-for="item in parkCodeList"
                  :key="item.phouseCode"
                  :label="item.phouseCode"
                  :value="item.phouseCode"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="价格" prop="scrapePrice">
              <el-input v-model="form.scrapePrice" placeholder="请输入价格(单位元)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单次运行时长" prop="runningTime">
              <el-input
                v-model="form.runningTime"
                :min=0
                placeholder="单位分钟"
                type="number"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="维修记录">
          <el-input v-model="form.scrapeRepair" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="故障记录">
          <el-input v-model="form.scrapeFaul" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {add, del, edit, findscrapeCode, getPhouseCode, getStart, list, listMsg, selectbyid} from "@/api/hmy/scrape";
import {findPhouseCodeAll} from "@/api/hmy/equipment";


export default {
  name: "scrape",
  dicts: ['hmy_park_type', 'hmy_fans_state', 'hmy_equipment_switch'],
  data() {
    return {
      PhouseCodeList: [],
      remainingTimes: {},
      intervalId: null, // 用于存储定时器ID的变量
      // 存储每个轮询定时器ID的对象
      pollingIntervals: {},
      msgTxt: '',
      oldScrapeCode: '',
      parkCodeList: [],
      messageList: [],
      messageParams: {
        phouseCode: ""
      },
      contextMenuVisible: false,
      contextMenuTop: 0,
      contextMenuLeft: 0,
      selectedContextItem: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 进货表格数据
      scrapeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        scrapeCode: "",
        scrapeName: "",
        phouseCode: ""
      },
      // 表单参数
      form: {
        runningTime: 30
      },
      // 表单校验
      rules: {
        scrapeCode: [
          {required: true, message: "编号不能为空", trigger: "blur"},
          // {
          //   validator: async (rule, value, callback) => {
          //     var scrapeCode = this.form.scrapeCode;
          //     if (this.oldScrapeCode === scrapeCode) {
          //       callback()
          //     } else if (scrapeCode != undefined) {
          //       await findscrapeCode(scrapeCode).then(response => {
          //         if (response.data != null) {
          //           callback(new Error("已存在"))
          //         }
          //       })
          //     }
          //   }, trigger: 'blur'
          // }
        ],
        scrapeName: [
          {required: true, message: "产品名称不可为空", trigger: "blur"}
        ],
        scrapeMaterial: [
          {required: true, message: "材质不能为空", trigger: "blur"}
        ],
        scrapeProduction: [
          {required: true, message: "生产日期不能为空", trigger: "blur"}
        ],
        phouseType: [
          {required: true, message: "栏舍类型不能为空", trigger: "blur"}
        ],
        scrapeState: [
          {required: true, message: "状态不能为空", trigger: "blur"}
        ],
        scrapePrice: [
          {required: true, message: "价格不能为空", trigger: "blur"}
        ],
        scrapeRepair: [
          {required: true, message: "维修记录不能为空", trigger: "blur"}
        ],
        scrapeFaul: [
          {required: true, message: "故障记录不能为空", trigger: "blur"}
        ],
        phouseCode: [
          {required: true, message: "故障记录不能为空", trigger: "blur"}
        ]
      }
    };
  },


  beforeDestroy() {
    // 组件销毁前停止轮询
    this.stopPolling();
  },
  created() {
    this.getList();
  },
  methods: {
    isLoading(item) {
      if (item.scrapeState === '1') {
        this.startPolling(item);
        return true;
      }
    },
    fetchEquipment(d) {
      // 查询环境信息的方法
      getStart(d.phouseCode).then(response => {
        console.log("论获取状态中")
        const timeInMinutes = Math.floor(response.data / 60);
        const result = timeInMinutes > 0 ? timeInMinutes + '分钟' : '小于1分钟';
        this.remainingTimes[d.scrapeId] = result;
        if (response.msg === "500") {
          this.icoeUp(d);
          this.stopPolling(d.phouseCode); // 使用设备或仓库的标识代码停止轮询
        }
      })
    },
    startPolling(d) {
      // 如果已经存在轮询，先停止再开启新的轮询
      if (this.pollingIntervals[d.phouseCode]) {
        this.stopPolling(d.phouseCode);
      }
      // 开启新的轮询
      this.pollingIntervals[d.phouseCode] = setInterval(() => {
        this.fetchEquipment(d);
      }, 1000 * 30); // 每30秒执行一次
    },
    stopPolling(phouseCode) {
      // 停止轮询的方法
      if (this.pollingIntervals[phouseCode]) {
        clearInterval(this.pollingIntervals[phouseCode]);
        this.pollingIntervals[phouseCode] = null; // 清除定时器ID
      }
    },
    scrapeNo(item) {
      this.$confirm('设备正在运行是否强制停止?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.icoeUp(item)
        this.stopPolling(item.phouseCode); // 使用设备或仓库的标识代码停止轮询
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '设备运行中'
        });
      });
    },
    filteredParkCodeList() {
      return this.parkCodeList.filter(parkCode => {
        return !this.scrapeList.some(park => park.phouseCode === parkCode.phouseCode);
      });
    },
    goright() {
      // 获取滚动容器
      const container = this.$el.querySelector('.scroll-container');
      container.scrollLeft += 240;
    },
    goleft() {

      const container = this.$el.querySelector('.scroll-container');
      container.scrollLeft -= 240;
    },
    handleWheel(event) {
      // 阻止默认的滚动行为
      event.preventDefault();
      // 获取滚动容器
      const container = this.$el.querySelector('.scroll-container');
      // 计算滚动距离
      const scrollAmount = event.deltaY;
      // 应用滚动距离到滚动容器的横向滚动
      container.scrollLeft += scrollAmount;
    },
    resetTable() {
      this.messageParams.phouseCode = ""
      this.tableQuery()
    },
    tableQuery(item) {
      console.log(item)
      if (item != null) {
        if (item.phouseCode != null) {
          this.messageParams.phouseCode = item.phouseCode
        }
      }
      /** 查询环境信息 */
      listMsg(this.messageParams).then(response => {
          this.messageList = response.data;
        }
      );
    },
    icoeUp(d) {
      if (d.scrapeState === '1') {
        d.scrapeState = '2'
        this.msgTxt = "设备已停止";
      } else {
        d.scrapeState = '1'
        this.msgTxt = "设备已启动";
        this.startPolling(d)
      }
      edit({
        "scrapeState": d.scrapeState,
        "scrapeId": d.scrapeId,
        "phouseType": d.phouseType,
        "phouseCode": d.phouseCode,
        "scrapeCode": d.scrapeCode,
        "runningTime": d.runningTime,
        "scrapePrice": -99
      }).then(response => {
        this.$modal.msgSuccess(this.msgTxt);
        this.open = false;
        this.getList();
      });

    },
    showDetails(item) {
      this.oldScrapeCode = item.scrapeCode
      selectbyid(item.scrapeId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看信息";
      });
    },
    /*右键显示*/
    showContextMenu(event, item) {
      this.contextMenuTop = event.clientY;
      this.contextMenuLeft = event.clientX;
      this.selectedContextItem = item;
      this.contextMenuVisible = true;
    },
    /*关闭*/
    hideContextMenu() {
      this.contextMenuVisible = false;
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      list(this.queryParams).then(response => {

          console.log(this.scrapeList)
          this.total = response.total;
          const filteredList = response.rows.filter(item => item.scrapeState === "1");
          filteredList.forEach(d => {
            this.fetchEquipment(d)
          });
          this.scrapeList = response.rows;
        }
      );
      /** 查询环境信息 */
      listMsg(this.messageParams).then(response => {
            this.messageList = response.data;
            this.loading = false;
          }
      );
      /** 查询环境信息 */
      getPhouseCode().then(response => {
          this.PhouseCodeList = response.data;
        }
      );

    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        scrapeCode: undefined,
        scrapeName: undefined,
        scrapeMaterial: undefined,
        scrapeProduction: undefined,
        scrapeRepair: undefined,
        scrapeFaul: undefined,
        scrapeState: undefined,
        scrapePrice: undefined,
        phouseType: undefined,
        phouseCode: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      //this.resetForm("queryForm");
      this.queryParams = {};
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.scrapeId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    //添加按钮
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备信息";
      findPhouseCodeAll().then(response => {
        this.parkCodeList = response.data;
        this.parkCodeList = this.filteredParkCodeList()
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const item = this.selectedContextItem;
      selectbyid(item.scrapeId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改设备信息";
      });
      this.hideContextMenu();
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.scrapeId != undefined) {

            edit(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const item = this.selectedContextItem;
      this.$modal.confirm('是否确认删除设备编号为"' + item.scrapeId + '"的数据项？').then(function () {
        return del(item.scrapeId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
      this.hideContextMenu();
    },

  }
};
</script>
<!--添加样式-->
<style scoped>
.scroll-container {
  scroll-behavior: smooth;
  overflow-x: auto; /* 启用横向滚动 */
  white-space: nowrap; /* 防止内部元素换行 */
  margin: 0 auto; /* 覆盖因为 gutter 导致的外边距问题 */
  position: relative;
  max-height: 100%; /* 设置一个最大高度 */
  overflow: hidden; /* 隐藏原生滚动条 */
}

.table-body {
  display: flex; /* 使用 flex 布局 */
  flex-wrap: nowrap; /* 防止子元素换行 */
  margin: 20px 0; /* 根据需要调整内边距 */
}

.table-body .el-col {
  flex: 0 0 auto; /* 避免 flex 子项被压缩 */
  white-space: normal; /* 使列内的内容正常换行 */
}

.emessage-div {
  transition: transform 0.3s; /* 设置动画过渡效果 */
}

.emessage-div:hover {
  transform: scale(1.1); /* 鼠标悬浮时放大1.5倍 */
}

.context-menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}

.parent-icon {
  position: relative;
}

.green-icon {
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  color: green;
  z-index: 9;
}

.rea-icon {
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  color: red;
  z-index: 9;
}

</style>
